নির্দিষ্ট এট্রিবিউটের সাহায্যে এইচটিএমএল এলিমেন্টকে স্টাইল করা
কোন একটি নির্দিষ্ট এট্রিবিউট অথবা এট্রিবিউটের ভ্যালুকে সিলেক্টের মাধ্যমে এইচটিএমএল এলিমেন্টকে স্টাইল করা সম্ভব।
সিএসএস [attribute] সিলেক্টর
[attribute] সিলেক্টরের সাহায্যে নির্দিষ্ট এট্রিবিউট যুক্ত এলিমেন্টকে সিলেক্ট করা যায়।
নিচের উদাহরণে target এট্রিবিউট যুক্ত সকল <a> এলিমেন্ট সিলেক্ট করা হয়েছে।
linkcode
টার্গেট এট্রিবিউট দ্বারা লিংকটির ব্রেকগ্রাউন্ড কালার পরিবর্তন করা হয়েছে।
সিএসএস এট্রিবিউট সিলেক্টর (CSS Attr Selector) - Example
<!DOCTYPE html>
<html>
<head>
<title>link background color by target attribute </title>
<style>
a[target] {
background-color: black;
}
</style>
</head>
<body>
<p> টার্গেট এট্রিবিউট দ্বারা লিংকটির ব্রেকগ্রাউন্ড কালার পরিবর্তন করা হয়েছে। </p>
<a href="https://www.sattit.com">sattit.com</a>
<a href="../../external.html?link=http://www.bloodgroupbd.com/" target="_blank">bloodgroupbd.com</a>
<a href="../../external.html?link=http://www.sattacademy.org/" target="_top">sattacademy.org</a>
</body>
</html>
সিএসএস [attribute="value"] সিলেক্টর
[attribute="value"] সিলেক্টরের মাধ্যমে নির্দিষ্ট এট্রিবিউট এবং এট্রিবিউটের ভ্যালু যুক্ত এলিমেন্টকে সিলেক্ট করা যায়।
নিচের উদাহরণে target="_blank" এট্রিবিউট যুক্ত সকল < a> এলিমেন্টকে সিলেক্ট করা হয়েছেঃ
সিএসএস এট্রিবিউট সিলেক্টর (CSS Attr Selector) - Example
<!DOCTYPE html>
<html>
<head>
<title> attribute valu selector</title>
<style>
a[target=_blank] {
background-color: black;
}
</style>
</head>
<body>
<p> target="_blank" করা লিংকটি কালো কালারের ব্যাকগ্রাউন্ড পাবেঃ</p>
<a href="www.sattit.com">sattit.com</a>
<a href="www.sattacademy.org" target="_blank">sattacademy.org</a>
<a href="www.sattacademy.com" target="_top">sattacadaemy.com</a>
</body>
</html>
সিএসএস [attribute~="value"] সিলেক্টর
[attribute~="value"] সিলেক্টরের মাধ্যমে এট্রিবিউটের ভ্যালুর কোন একটি নির্দিষ্ট শব্দের সাহায্যে এলিমেন্টকে সিলেক্ট করা যায়।
নিচের উদাহরণে, title এট্রিবিউটের ভ্যালুর মধ্যে একটি সতন্ত্র শব্দ "satt" যুক্ত সকল এলিমেন্টকে সিলেক্ট করা হয়েছেঃ
সিএসএস এট্রিবিউট সিলেক্টর (CSS Attr Selector) - Example
<!DOCTYPE html>
<html>
<head>
<title>attribute valu selector by fixed word</title>
<style>
[title~="satt"] {
border: 8px solid green;
}
</style>
</head>
<body>
<p>যে ইমেজ গুলোর টাইটেলে "satt" শব্দটি রয়েছে তার বর্ডার কালার হলুদ করা হয়েছে।</p>
<img src="../css_examples/satt_bangla1.jpg" title=" chandpur satt" width="150" height="113">
<img src="../css_examples/satt.jpg" title="logo_satt" width="224" height="162">
<img src="../css_examples/satt.png" title="satt logo" width="200" height="358">
</body>
</html>
উপরের উদাহরণে title=" chandpur satt", এবং title="satt logo" যুক্ত এলিমেন্টগুলোর সাথে ম্যাচ(match ) করবে। কিন্তু title="our-satt" অথবা title="satts" যুক্ত এলিমেন্টের সাথে ম্যাচ করবে না।
সিএসএস [attribute|="value"] সিলেক্টর
[attribute|="value"] সিলেক্টরের মাধ্যমে কোন নির্দিষ্ট এট্রিবিউটের একটি নির্দিষ্ট ভ্যালু দিয়ে শুরু হওয়া এলিমেন্টকে সিলেক্ট করা যায়।
নিচের উদাহরণে class এট্রিবিউটের "satt" শব্দ দিয়ে শুরু হওয়া ভ্যালু যুক্ত সকল এলিমেন্টকে সিলেক্ট করা হয়েছেঃ
নোটঃ ভ্যালু অবশ্যই একটি পুরো শব্দ হতে হবে। যেমনঃ-class="satt",class="satt_info",class="satt-name" অথবা class="sattservicee"!
সিএসএস এট্রিবিউট সিলেক্টর (CSS Attr Selector) - Example
<!DOCTYPE html>
<html>
<head>
<title> attribute select by start word</title>
<style>
[class|="satt"] {
background: green;
}
</style>
</head>
<body>
<h1 class="satt_name"> স্যাট একাডেমি </h1>
<p class="satt-info">চাদপুর বাংলাদেশ</p>
<p class="sattservice"> আইটি ক্ষেত্রে এক বিপ্লবের নাম স্যাট।</p>
</body>
</html>
সিএসএস [attribute^="value"] সিলেক্টর
[attribute^="value"] সিলেক্টরটি এলিমেন্টকে সিলেক্ট করতে ব্যবহৃত হয় যাদের এট্রিবিউটের ভ্যালু কোন একটি নির্দিষ্ট ভ্যালু দিয়ে শুরু হয়।
নিচের উদাহরণে ঐ সকল এলিমেন্টকে সিলেক্ট করবে যাদের এট্রিবিউটের ভ্যালু "satt" দিয়ে শুরু হয়েছে।
নোট: ভ্যালুটি সম্পূর্ণ শব্দ না হলেও চলবে। যেমন: class="satt", অথবা হাইফেন ( - ) দ্বারাও ব্যবহার করা যেতে পারে। যেমনঃ class="satt-name"! ,class="satt_info"!
সিএসএস এট্রিবিউট সিলেক্টর (CSS Attr Selector) - Example
<!DOCTYPE html>
<html>
<head>
<title> attribute select by start word</title>
<style>
[class^="satt"] {
background: green;
}
</style>
</head>
<body>
<h1 class="satt_name"> স্যাট একাডেমি </h1>
<p class="satt-info">চাদপুর বাংলাদেশ</p>
<p class="sattservice"> আইটি ক্ষেত্রে এক বিপ্লবের নাম স্যাট।</p>
<p><b> বি দ্রঃ</b> ইন্টারনেট এক্সপ্লোরারে[<i> [attribute~="value"]</i>] দুত কাজ করানোর স্বার্থে DOCTYPE ডিক্লেয়ার করতে হবে।</p>
</body>
</html>
সিএসএস [attribute$="value"] সিলেক্টর
[attribute$="value"] সিলেক্টরটি এমন এলিমেন্টকে সিলেক্ট করতে ব্যবহৃত হয় যাদের এট্রিবিউটের ভ্যালু কোন একটি নির্দিষ্ট ভ্যালু দিয়ে শেষ হয়।
নিচের উদাহরণে ঐ সকল এলিমেন্টকে সিলেক্ট করবে যাদের এট্রিবিউট class এবং যার ভ্যালু "satt" দিয়ে শেষ হয়েছে।
নোট: ভ্যালুটি সম্পূর্ণ শব্দ না হলেও চলবে। যেমন: class="satt", অথবা হাইফেন ( - ) দ্বারাও ব্যবহার করা যেতে পারে। যেমনঃ class="satt-name"! ,class="satt_info"!
সিএসএস এট্রিবিউট সিলেক্টর (CSS Attr Selector) - Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
[class$="satt"] {
background:green;
}
</style>
</head>
<body>
<div class="info_satt">সিলেক্ট হবে</div>
<div class="select">সিলেক্ট হবেনা</div>
<div class="our_satt">সিলেক্ট হবে</div>
<p class="chandpursatt">সিলেক্ট হবে</p>
</body>
</html>
সিএসএস [attribute*="value"] সিলেক্টর
[attribute*="value"] সিলেক্টরটি এমন এলিমেন্টকে সিলেক্ট করতে ব্যবহৃত হয় যাদের এট্রিবিউট একটি নির্দিষ্ট ভ্যালু বহন করে।
নিচের উদাহরণে ঐ সকল এলিমেন্টকে সিলেক্ট করে যার class এট্রিবিউটের ভ্যালু "sa" বর্ণগুলো বহন করেঃ
নোটঃ ভ্যালুটি সম্পূর্ণ শব্দ না হলেও চলবে।
সিএসএস এট্রিবিউট সিলেক্টর (CSS Attr Selector) - Example
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
[class*="sa"] {
background: aqua;
}
</style>
</head>
<body>
<div class="info_satt">সিলেক্ট হবে</div>
<div class="select">সিলেক্ট হবেনা</div>
<div class="our-satt">সিলেক্ট হবে</div>
<p class="chandpursatt">সিলেক্ট হবে</p>
</body>
</html>
এট্রিবিউট সিলেক্টরের মাধ্যমে ফর্ম স্টাইল করা
class বা ID ছাড়াও এট্রিবিউট সিলেক্টরের মাধ্যমে ফরম স্টাইল করা সহজ।
সিএসএস এট্রিবিউট সিলেক্টর (CSS Attr Selector) - Example
<!DOCTYPE html>
<html>
<head>
<title> style form by attribute selector</title>
<style>
input[type=text] {
width: 200px;
display: block;
margin-bottom: 2px;
margin-bottom: 15px;
background-color: black;
}
input[type=button] {
width: 80px;
margin-left: 0px;
margin-top: 30px;
display: block;
}
</style>
</head>
<body>
<form name="input" action="#" method="get">
নামের প্রথম অংশ:<input type="text" name="Name" value="নূর মোহাম্মদ" size="20">
নামের শেষ অংশ :<input type="text" name="Name" value="রাজু" size="20">
<input type="button" value="বাটন">
</form>
বিঃ দ্র: ইন্টারনেট এক্সপ্লোরের[এট্রিবিউট] দ্রুত কাজ করানোর জন্য DOCTYPE অবশ্যই ডিক্লেয়ার করতে হবে
টিপস: ফর্ম স্টাইল সম্মন্ধে আরো জানতে আমাদের সিএসএস ফরম অধ্যায় ভিজিট করুন।
সিএসএস সিলেক্টরের সম্পূর্ণ রেফারেন্সের জন্য আমাদের সিএসএস সিলেক্টর অধ্যায়টি পড়ূন।
Read more
